<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <SearchForm
          v-show="showSearch"
          v-model="queryParams"
          :options="options.formOps"
          @onQuery="getList"
        >
        </SearchForm>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd"
              >新增</el-button
            >
          </el-col>

          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <Table
          ref="table"
          :auto-featch="true"
          :fetch-data="fetchData"
          :options="options.table"
        >
          <template #actionButton="{ row }">
            <el-button type="text" icon="Edit" @click="handleEdit(row)"
              >修改</el-button
            >

            <el-button
              type="text"
              icon="Delete"
              style="color: red"
              @click="handleDel(row)"
              >删除</el-button
            >
          </template></Table
        >
        <DialogVform
          :formJson="formJson"
          ref="dialogVform"
          :slots="['deptName', 'planName']"
          @onSubmit="onSubmit"
          :title="dialogType == 'add' ? '新增环境检测点位' : '修改环境检测点位'"
        >
          <template #deptName>
            <el-form-item
              label="所属部门"
              prop="planDeptId"
              label-position="right"
            >
              <TreeSelect
                v-model="form.planDeptId"
                :options="deptTree"
                @change="changeDept"
                style="width: 100%"
              >
              </TreeSelect>
            </el-form-item>
          </template>
          <template #planName>
            <el-form-item label="处置方案名称">
              <el-input
                v-model="form.planName"
                readonly
                @click="onInnerOpen"
              ></el-input>
            </el-form-item>
          </template>

          <template #default>
            <TableSelect
              ref="tableSelect"
              :queryApi="YJYA.query"
              :options="[{ prop: 'planName', label: '应急预案名称' }]"
              :rowKey="'id'"
              rowLabel="planName"
              @onConfirm="onFaConfirm"
              rowLabelText="应急预案名称"
            ></TableSelect>
          </template>
        </DialogVform>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import DialogVform from "@/components/dialogVform/index";
import formJson from "./components/options.json";
import { apis as YJYA } from "@/api/yjzhgl/yjyawh.js";
import { apis as APIS } from "@/api/hdwarning/hjjcdw.js";
import { useAsyncData, useFormJsonNew } from "@/views/hooks/useAsyncData.js";
import TableSelect from "@/components/tableSelect";

import { deptTreeSelect } from "@/api/system/user";
const { proxy } = getCurrentInstance();

const ops = useFormJsonNew(formJson, {
  sort: [],
  sortable: [],
});
const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    ["deptName", "bitNumber", "databaseBitNumber", "gasDetection"].includes(
      i.prop
    )
  ),
});
const showSearch = ref(true);
const dialogVform = ref();
const table = ref();
const tableSelect = ref();
const onInnerOpen = () => {
  const { planId, planName } = form.value;
  const values = (planId && (planId + "").split(",")) || [];
  const names = (planName && planName.split(",")) || [];
  tableSelect.value.open(
    values.map((item, index) => ({
      value: values[index],
      label: names[index],
    }))
  );
};
const onFaConfirm = (data) => {
  const values = data.map((item) => item.value);
  const names = data.map((item) => item.label);
  form.value.planId = values.join(",");
  form.value.planName = names.join(",");
};
const changeDept = (val, label) => {
  form.value.deptName = label;
  form.value.deptId = val;
};
const plugEdit = (node) => {
  form.value.deptId = node.deptId || "";
  form.value.deptName = node.deptName || "";
  form.value.planId = node.planId || "";
  form.value.planName = node.planName || "";
};
const plugAdd = () => {
  form.value.deptId = "";
  form.value.deptName = "";
};
const {
  onSubmit,
  fetchData,
  dialogType,
  handleAdd,
  handleEdit,
  getList,
  handleDel,
  queryParams,
  form,
} = useAsyncData({
  APIS,
  formJson,
  dialogVform,
  table,
  proxy,
  plugEdit,
  plugAdd,
});
const deptTree = ref([]);
onMounted(() => {
  deptTreeSelect().then((response) => {
    deptTree.value = response.data;
  });
});
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label {
  text-align: right !important;
}
</style>
